<template>
  <div class="house-overview">
    <div class="house-statistics">
      <div class="stat-item total" @click="navigateToRoomList('all')">
        <div class="stat-icon">
          <i class="el-icon-house"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{totalRooms}}</div>
          <div class="stat-label">总房源</div>
        </div>
      </div>

      <div class="stat-item rented" @click="navigateToRoomList('rented')">
        <div class="stat-icon">
          <i class="el-icon-user"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{rentedRooms}}</div>
          <div class="stat-label">在住房</div>
        </div>
      </div>

      <div class="stat-item idle" @click="navigateToRoomList('vacant')">
        <div class="stat-icon">
          <i class="el-icon-office-building"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{idleRooms}}</div>
          <div class="stat-label">闲置房</div>
        </div>
      </div>
    </div>

    <!-- 钥匙到期提醒 -->
    <div class="key-expiry-section">
      <div class="section-divider">
        <div class="divider-line"></div>
        <div class="divider-title">钥匙到期提醒</div>
        <div class="divider-line"></div>
      </div>

      <div class="key-expiry-cards">
        <!-- 已到期卡片 -->
        <div class="key-expiry-card expired" @click.stop="navigateToKeys('expired')">
          <div class="card-icon">
            <i class="el-icon-time"></i>
          </div>
          <div class="card-content">
            <div class="card-count">{{ expiredCount }}</div>
            <div class="card-title">已到期</div>
          </div>
        </div>

        <!-- 即将到期卡片 -->
        <div class="key-expiry-card expiring" @click.stop="navigateToKeys('expiring')">
          <div class="card-icon">
            <i class="el-icon-warning-outline"></i>
          </div>
          <div class="card-content">
            <div class="card-count">{{ expiringCount }}</div>
            <div class="card-title">即将到期</div>
            <div class="card-subtitle">3天内</div>
          </div>
        </div>

        <!-- 有效期内卡片 -->
        <div class="key-expiry-card valid" @click.stop="navigateToKeys('valid')">
          <div class="card-icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="card-content">
            <div class="card-count">{{ validCount }}</div>
            <div class="card-title">有效期内</div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import {
    selectXianZhiCount,
    selectDaoQiCount,
    roomStatistics,
    keyExpiryStatus
  } from "@/api/lock/menu";

  export default {
    name: "shenfen",
    data() {
      return {
        xzCount: null,
        dqCount: null,
        totalRooms: 0,
        rentedRooms: 0,
        idleRooms: 0,
        queryParams: {},
        // 钥匙到期状态数据
        expiredCount: 0,
        expiringCount: 0,
        validCount: 0,
        totalKeyCount: 0,
        keyStats: {
          total: 0,
          active: 0,
          inactive: 0
        }
      }
    },
    mounted() {
      this.getRoomStatistics();
      this.getKeyExpiryStatus();
    },
    created() {
      this.getRoomStatistics();
      this.getKeyExpiryStatus();
    },
    methods: {
      getRoomStatistics() {
        roomStatistics(this.queryParams).then(response => {
          if (response.data) {
            this.totalRooms = response.data.totalRooms || 0;
            this.rentedRooms = response.data.rentedRooms || 0;
            this.idleRooms = response.data.idleRooms || 0;
          }
        });
      },
      getKeyExpiryStatus() {
        keyExpiryStatus().then(response => {
          console.log("钥匙到期状态统计:", response.data);
          this.expiredCount = response.data.expiredCount || 0;
          this.expiringCount = response.data.expiringCount || 0;
          this.validCount = response.data.validCount || 0;
          this.totalKeyCount = this.expiredCount + this.expiringCount + this.validCount;
        });
      },
      formatDateTime(dates) {
        const date = new Date(dates);

        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
      },


      // 跳转到钥匙管理界面并应用过滤条件
      navigateToKeys(expiryStatus) {
        let type;
        switch (expiryStatus) {
          case 'expired':
            type = '2';
            break;
          case 'expiring':
            type = '1';
            break;
          case 'valid':
            type = '0';
            break;
          default:
            type = '0';
        }

        this.$router.push({
          path: "/tenantkey",
          query: {
            waringType: type
          }
        });
      },
      // 导航到房源列表页面
      navigateToRoomList(type) {
        this.$router.push({
          path: "/room",
          query: {
            type: type // 'all', 'rented', 'vacant'
          }
        });
      }



    }
  }
</script>

<style lang="scss" scoped>
  .house-overview {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;

    .house-statistics {
      padding: 20px 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;

      .stat-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
        }

        .stat-icon {
          width: 55px;
          height: 55px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;

          i {
            font-size: 26px;
            color: white;
          }
        }

        .stat-content {
          flex: 1;

          .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #303133;
          }

          .stat-label {
            font-size: 14px;
            color: #606266;
          }
        }

        &.total .stat-icon {
          background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
        }

        &.rented .stat-icon {
          background: linear-gradient(135deg, #722ed1 0%, #eb2f96 100%);
        }

        &.idle .stat-icon {
          background: linear-gradient(135deg, #faad14 0%, #fa8c16 100%);
        }
      }
    }

    .key-expiry-section {
      flex: 1;
      display: flex;
      flex-direction: column;

      .section-divider {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .divider-line {
          flex: 1;
          height: 1px;
          background-color: #ebeef5;
        }

        .divider-title {
          padding: 0 15px;
          font-size: 15px;
          font-weight: bold;
          color: #303133;
        }
      }

      .key-expiry-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
      }

      .key-expiry-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12px 10px;
        border-radius: 8px;
        color: white;
        transition: all 0.3s;
        cursor: pointer;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        text-align: center;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
        }

        &.expired {
          background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
        }

        &.expiring {
          background: linear-gradient(135deg, #E6A23C 0%, #EEBE77 100%);
        }

        &.valid {
          background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
        }

        .card-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
        }

        .card-icon i {
          font-size: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
        }

        .card-content {
          width: 100%;

          .card-count {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: 5px;
          }

          .card-title {
            font-size: 14px;
            margin-bottom: 2px;
          }

          .card-subtitle {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 2px;
          }
        }
      }
    }

    .key-status-overview {
      flex: 1;
      display: flex;
      flex-direction: column;

      .status-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 15px;
      }

      .status-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 12px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
        }

        .card-icon {
          width: 45px;
          height: 45px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
        }

        .card-info {
          flex: 1;

          .card-value {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 3px;
            color: #303133;
          }

          .card-label {
            font-size: 13px;
            color: #606266;
          }
        }
      }
    }
  }

  // 响应式布局调整
  @media (max-width: 1280px) {
    .house-overview {
      .house-statistics {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .stat-item {
          padding: 10px;
        }
      }

      .key-expiry-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        .key-expiry-card {
          padding: 10px 8px;
        }
      }
    }
  }

  @media (max-width: 992px) {
    .house-overview {
      .house-statistics {
        grid-template-columns: repeat(2, 1fr);
      }

      .key-expiry-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }

  @media (max-width: 768px) {
    .house-overview {
      .house-statistics {
        grid-template-columns: repeat(1, 1fr);
      }

      .key-expiry-cards {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
</style>
